<template xmlns="http://www.w3.org/1999/html">
    <div>
        <div class="home" >
            <div style="width: 20%">
                <a href="/" > <img style="width: 100px;" src="../../static/title.png"/></a>
            </div>
            <div style="width: 70%;margin-left: 20px">
              <button v-if="!userInfo&&!mobileShow" @click="login" style="float: right;border: none;background-color: white;" >登录</button>

              <button   @click="blogHome" style="float: left;border: none;background-color: white;"  >博客</button>
                <button  @click="goRouter('/attention')" style="margin-right: 5px;float: left;border: none;background-color: white;"><span>关注</span></button>



                <button  @click="writeArticle"  style="float: right;border: none;background-color: white;"  >写文章</button>
                <button @click="goHouse" style="float: right;border: none;background-color: white;" >房企售</button>


            </div>
            <a v-if="userInfo" @click="userCenter" >

                <el-popover
                        placement="top-start"
                        title=""
                        :width="200"
                        trigger="hover"
                        content=""
                >
                    <div style="text-align: center;width: 60%">
                        <ul style="list-style: none;float: left;">
                            <li style="float: left" class="el-icon-star-off"><el-button type="text" style="color: black">收藏的文章</el-button></li>  <br/>
                            <li style="float: left" class="el-icon-coin"><el-button type="text" style="color: black">喜欢的文章</el-button></li>  <br/>
                            <li style="float: left" class="el-icon-goods"><el-button type="text" style="color: black">我的钱包</el-button></li>  <br/>
                            <li style="float: left" class="el-icon-user"><el-button @click="mySelf" type="text" style="color: black">个人资料</el-button></li>  <br/>
                            <li style="float: left" class="el-icon-question"><el-button type="text" style="color: black">帮助反馈</el-button></li>  <br/>
                            <li style="float: left" class="el-icon-question"><el-button @click="logout" type="text" style="color: black">退出登录</el-button></li>  <br/>
                        </ul>
                    </div>

                    <template #reference>
                        <el-avatar style="float: right;" :src="userInfo.avatarUrl"></el-avatar>


                    </template>
                </el-popover>
            </a>
          <button v-if="!userInfo&&mobileShow" @click="login" style="float: right;border: none;background-color: white;" >登录</button>

        </div>
        <div style="height: 100%;margin-top: 60px; margin-bottom: 20px">
            <router-view v-on:viewIn="changeTitle"></router-view>
        </div>
        <footer v-if="footShow">Copyright (C) ©2012-2021 潘潘科技 / 简客 / 鲁ICP备20017125号-2 /, All Rights Reserved </footer>

        <ToLogin ref="toLoginRef" @loginBack="loginBack"></ToLogin>
    </div>
</template>

<script>
    import ToLogin from '../views/ToLogin'
    import {clearCookie, getCookie, postReq} from "../utils/api";
    export default {
        name: 'Home',
        mounted(){
            this._getUserInfo();
          if ((navigator.userAgent.match(/(iPhone|iPod|Android|ios|iOS|iPad|Backerry|WebOS|Symbian|Windows Phone|Phone)/i))) {
            this.mobileShow=false
          }
        },
        components:{
            ToLogin
        },
        data() {
            return {
                mobileShow:true,
                activeIndex: '1',
                activeIndex2: '1',
                input:'',
                footShow:false,
                userInfo: {},
                fits: ['fill', 'contain', 'cover', 'none', 'scale-down'],
                url: '../../static/title.png'
            };
        },
        methods: {
            handleSelect(key, keyPath) {
                this.$router.push(key);

            },
            changeTitle(){
                this.footShow=true
                this._getUserInfo()
            },
            loginBack(){
                this._getUserInfo()
            },
            _addBlog(){
                window.open('/#/blog_add')
            },
            goHouse(){
                window.open('http://house.huiyishou.xyz')
            },
            goRouter(url){
                this.$router.push(url)
            },
            login(){
                this.$refs.toLoginRef._open()
            },
            blogHome(){
                this.$router.push('/')
            },

            writeArticle(){
                if (this.userInfo){
                    this.$router.push('/blog_add')
                }else{
                    this.$refs.toLoginRef._open()
                }

            },

            userCenter(){
                window.open('/#/user_center')
            },
            logout(){
                this.$router.push('/')
                this.userInfo=undefined
                sessionStorage.clear()
                clearCookie()
                this.$message({
                    type: 'success',
                    message: '退出成功!'
                });
            },

            mySelf(){
                this.$router.push('/user_center')
            },
            _getUserInfo(){
                let auth= getCookie('Authorization')
                if (undefined===auth||''===auth){
                    sessionStorage.clear()
                    this.userInfo=undefined
                    return false
                }
                let user  =  sessionStorage.getItem('user')

                if (undefined===user||null===user||'undefined'===user||'null'===user){
                    if (undefined!==auth&&''!==auth){
                        postReq('/api/sys_user/auth?token='+auth).then(res=>{
                            this.userInfo=JSON.parse(JSON.stringify(res.data.data))
                            console.log('-------d--',this.userInfo)
                            sessionStorage.setItem('user',JSON.stringify(res.data.data))
                        })
                    }else{
                        this.userInfo=undefined
                    }
                }else{
                    this.userInfo = JSON.parse(user)
                }


            },
        }
    }
</script>

<style scoped>
    .home{
        width: 100%;
        text-align: center;
        vertical-align: center;
        position: fixed; top: 0px; left: 0px; z-index: 9999; width: 100%;
        font-size: .75em;    color: #333;
        background: #fff;

        height: 60px;
        display: flex;
        align-items: center;
        box-shadow: 0 5px 4px 0 rgba(0,0,0,.05);
    }
    footer {
        position: fixed;
        background-color: rgba(43, 166, 166, 0.5);
        color: black;
        bottom: 0;
        left: 0;
        right: 0;
        text-align: center;
        height: 20px;
        line-height: 20px;
    }
</style>
